import React, { Component, Fragment } from 'react';
import { Card, Button, Modal } from 'antd';
import './ui.less';

export default class Modals extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal1: false,
      modal2: false,
      modal3: false,
      modal4: false
    };
  }

  showModal(type) {
    return this.setState({
      [type]: true
    });
  }

  showModalType(type) {
    Modal[type]({
      title: type,
      content: type,
      onCancel() {
        console.log('onCancel');
      },
      onOk() {
        console.log('onOk');
      }
    })
  }

  handleOk(type) {
    return this.setState({
      [type]: false
    });
  }

  handleCancel(type) {
    return this.setState({
      [type]: false
    });
  }

  render() {
    return (
      <Fragment>
        <Card title="基础模态框" className="card-wrap">
          <Button type="primary" onClick={() => this.showModal('modal1')}>
            Open
          </Button>
          <Button type="primary" onClick={() => this.showModal('modal2')}>
            自定义页脚
          </Button>
          <Button type="primary" onClick={() => this.showModal('modal3')}>
            顶部20px弹窗
          </Button>
          <Button type="primary" onClick={() => this.showModal('modal4')}>
            水平垂直居中
          </Button>
        </Card>
        <Card title="信息确认框" className="card-wrap">
          <Button type="primary" onClick={() => this.showModalType('confirm')}>Comfig</Button>
          <Button type="dashed" onClick={() => this.showModalType('info')}>info</Button>
          <Button onClick={() => this.showModalType('success')}>success</Button>
          <Button type="danger" onClick={() => this.showModalType('error')}>error</Button>
          <Button onClick={() => this.showModalType('warning')}>warning</Button>
        </Card>

        <Modal
          title="Basic"
          visible={this.state.modal1}
          onOk={() => this.handleOk('modal1')}
          onCancel={() => this.handleCancel('modal1')}
        >
          <p>基础模态框</p>
          <p>基础模态框</p>
        </Modal>

        <Modal
          title="自定义页脚"
          visible={this.state.modal2}
          onOk={() => this.handleOk('modal2')}
          onCancel={() => this.handleCancel('modal2')}
          okText="好的"
          cancelText="算了"
        >
          <p>自定义页脚</p>
        </Modal>

        <Modal
          title="顶部20px弹窗"
          visible={this.state.modal3}
          onOk={() => this.handleOk('modal3')}
          onCancel={() => this.handleCancel('modal3')}
          style={{ top: 20 }}
        >
          <p>顶部20px弹窗</p>
        </Modal>

        <Modal
          title="水平垂直居中"
          visible={this.state.modal4}
          onOk={() => this.handleOk('modal4')}
          onCancel={() => this.handleCancel('modal4')}
          centered
        >
          <p>水平垂直居中</p>
        </Modal>

      </Fragment>
    );
  }
}
